<template>
  <div class="header-btn">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-text class="mx-1" type="danger">建议886*200px,图片大小小于1M,/jpg/png/jpeg格式,有效期内发布0-5张,超过取前5位,创建上限为10.</el-text>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
      </el-col>
    </el-row>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="编号" prop="bannerId" width='320' align="center" />
    <el-table-column label="标题" prop="bannerTitle" width='180' align="center" />
    <el-table-column label="连接地址" prop="src" width='180' align="center" />
    <el-table-column label="图片" prop="url" width='150' align="center">
      <template #default="scope">
        <img :src="scope.row.url" alt="" width="120">
      </template>
    </el-table-column>
    <el-table-column prop="status" label="状态" width="100" align="center">
      <template #default="scope">
        <el-tag :type="scope.row.status == '0' ? 'danger' : 'success'" disable-transitions>
          {{ scope.row.status == 1 ? '开启' : '关闭' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="创建日期" prop="createDate" width='100' align="center" />
    <el-table-column align="center" label="操作" width="250">
      <template #default="scope">
        <el-button size="large" :icon="Edit" @click="editBtn(scope.$index, scope.row)">编辑</el-button>
        <el-button size="large" :icon="Delete" type="danger" @click="deleteBtn(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <AddBanner ref="addBannerRef" @save='save'></AddBanner>
</template>

<script setup>
import { onMounted } from 'vue'
import { useTable } from '@/hooks/useTable';
import { getBannerList } from '@/api/banner';
import { Plus, View, Delete, Edit } from '@element-plus/icons-vue'
import AddBanner from '@/views/adverts/AddBanner.vue'
import { useBanner } from '@/composables/banner/useBanner'
// 列表查询的hooks
const { tableData, page, loading, loadList, handleSizeChange, searchData, } = useTable(getBannerList);
// 弹窗组件的hooks
const { addBtn, editBtn, deleteBtn, save, addBannerRef } = useBanner(loadList);

onMounted(() => {
  searchData(loadList)
})

//确认表单确认
const confirm = () => {
  //关闭弹框
  onClose();
}
</script>

<style lang="scss" scoped>
.header-btn {
  width: 100%;
  padding: 15px 20px;
  height: 100px;
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>